<template>
  <div class="ht-container" v-loading="state.loading">
    <HtHeader :data="breadData"> </HtHeader>

    <div>
      <OldHtSearch
        @handelVisible="handelVisible"
        placeholder="搜索 酒品名称、酒品代码、SAP物料名称、SAP物料编码"
        @reset="reset"
        :showFilter="true"
        @search="search"
      >
        <el-col :span="12">
          <el-form-item label="酒品类别">
            <SelectWineCate
              v-model="state.filter.type"
              @change="handleSearch"
            ></SelectWineCate>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="酒品等级">
            <SelectWineGrade
              v-model="state.filter.grade"
              @change="handleSearch"
            ></SelectWineGrade>
          </el-form-item>
        </el-col>
      </OldHtSearch>
      <el-card class="ht-card" style="margin-top: 16px">
        <ht-table
          class="ht-table-no-border"
          :data="state.dataSource"
          @onchange="changePage"
          style="width: 100%; margin-top: 12px"
          border
          @selection-change="(e) => (state.selectRows = e)"
          :checked="false"
          pageStyle="text-align:right"
          :height="`calc(100vh - 314px - ${state.searchHeight}px)`"
          highlight-current-row
          :page-info="{
            currentPage: state.filter.currentPage,
            pageSize: state.filter.maxResultCount,
            skipCount: state.filter.skipCount,
            totalCount: state.filter.totalCount,
          }"
          :columns="columns"
        >
          <Temp slot="empty">
            <span slot="tips">暂无数据哦</span>
          </Temp>

          <template slot="weight" slot-scope="{ row }">
            <span v-if="row.weight"> {{ row.weight }}{{ row.uom }}</span>
            <span v-else>--</span>
          </template>

          <template slot="handel" slot-scope="{ row }">
            <span class="cursor" @click="getDetail(row)">库存明细</span>
          </template>
        </ht-table></el-card
      >
    </div>

    <ht-drawer
      class="ht-new-drawer"
      v-model="state.visible"
      title="库存明细"
      size="100%"
    >
      <Inventorydetails
        :selectRow="state.selectRow"
        ref="inventorydetails"
      ></Inventorydetails>

      <div slot="foot">
        <Export
          :url="state.exportUrl"
          com-style="margin-left:28px;"
          :export-before="true"
          type="primary"
          size="large"
          :method="'get'"
          ><el-button
            type="primary"
            style="margin-left: 15px;float: left"
            @click="exportTable"
            >导出库存明细</el-button
          ></Export
        >

        <el-button
          :loading="state.loading"
          style="margin-left:14px;float: left"
          @click="state.visible = false"
          >取消</el-button
        >
      </div>
    </ht-drawer>
  </div>
</template>
<!-- <Status color="var(--primary)">已完成</Status> -->

<script lang="ts">
import { BreadType, Column, PageType } from 'htui-yllkbz/src/packages/type';
import { _axios } from 'vue-kst-auth';

import Temp from '@/components/temp.vue';
import { Component, Vue, Watch } from 'vue-property-decorator';
import SelectWineGrade from '@/components/selectWineGrade.vue';
import SelectWineCate from '@/components/selectWineCate.vue';

import OldHtSearch from '@/components/oldHtSearch.vue';
import Status from '@/components/status.vue';
import HtHeader from '@/components/htHeader.vue';
import Inventorydetails from './inventorydetails.vue';
import { JarStatusApi } from '@/plugins/api';
import Export from './export.vue';
interface State {
  /** 数据状态 */
  exportVsible: boolean;
  loading: boolean;
  visible: boolean;
  searchHeight: number;
  activeName: string;
  testValue?: string;
  btnText: string;
  titleText: string;

  dataSource: any;
  /** 选中的数据 */
  selectRow: any;
  /** 批量选中的数据 */
  selectRows: any[];
  filter: {
    keyWords: string | undefined;
    manageOrganizationUnitId: string | undefined;
    grade: string | undefined;
    type: string | undefined;
    skipCount: number;
    maxResultCount: number;
    totalCount: number;
    currentPage: number;
  };
  exportUrl: string;
}
@Component({
  components: {
    OldHtSearch,
    Temp,
    Status,
    HtHeader,
    Inventorydetails,
    SelectWineGrade,
    SelectWineCate,
    Export,
  },
})
export default class Index extends Vue {
  JarStatusApi = new JarStatusApi('/alcohol-management', _axios);
  /** 数据 */
  state: State = {
    exportVsible: false,
    loading: false,

    activeName: 'third',
    testValue: undefined,
    searchHeight: 84,
    visible: false,
    dataSource: [],
    selectRows: [],
    selectRow: {},

    btnText: '',
    titleText: '',
    filter: {
      keyWords: undefined,
      manageOrganizationUnitId: undefined,
      grade: undefined,
      type: undefined,

      skipCount: 0,

      maxResultCount: 20,
      currentPage: 1,
      totalCount: 0,
    },
    exportUrl: '',
  };

  /** 生命周期 */
  mounted() {
    this.getDataSource();

    //this.$notify.success('测试能够更改文件');
  }
  getDetail(val: any) {
    this.state.selectRow = val;
    this.state.visible = true;
  }
  exportTable() {
    const filter = (this.$refs.inventorydetails as any)?.state?.filter;
    if (!filter.manageOrganizationUnitId) {
      filter.manageOrganizationUnitId = '';
    }
    if (!filter.warehouseCode) {
      filter.warehouseCode = '';
    }

    this.state.exportUrl = `/alcohol-management/api/JarStatus/ExportBreedStockDetails?breedCode=${this.state.selectRow.breedSapCode}&manageOrganizationUnitId=${filter.manageOrganizationUnitId}&warehouseCode=${filter.warehouseCode}&skipCount=${filter.skipCount}&maxResultCount=${filter.maxResultCount}`;
  }

  /** 搜索框 */
  handelVisible(height: number) {
    this.state.searchHeight = height;
  }
  /** 重置 */
  reset() {
    const { filter } = this.state;
    filter.keyWords = '';
    filter.grade = '';
    filter.type = '';
    filter.manageOrganizationUnitId = '';

    this.handleSearch();
  }
  /** 搜索的回调 */
  search(data: any) {
    this.state.filter.keyWords = data.keys;

    this.handleSearch();
  }
  handleSearch() {
    this.state.filter.skipCount = 0;
    this.state.filter.currentPage = 1;

    this.getDataSource();
  }
  /** 查询列表 */
  getDataSource() {
    this.state.loading = true;
    const { filter } = this.state;

    this.JarStatusApi.getBreedPageList(
      filter.keyWords,
      // filter.manageOrganizationUnitId,
      filter.type,
      filter.grade,
      filter.skipCount,
      filter.maxResultCount,
      undefined
    )
      .then((res: any) => {
        this.state.dataSource = res.items || [];

        this.state.filter.totalCount = res.totalCount || 0;
      })
      .finally(() => {
        this.state.loading = false;
      });
  }
  //添加酒品
  sumbit() {
    const data = (this.$refs.addWine as any).submit();
  }
  //编辑
  editData() {
    this.state.btnText = '保存';
    this.state.titleText = '编辑';
    this.state.visible = true;
  }
  //添加酒品

  addWine() {
    this.state.btnText = '添加';
    this.state.titleText = '添加';
    this.state.visible = true;
  }
  //分页
  changePage(data: PageType) {
    // const data = e.detail[0];
    this.state.filter.currentPage = data.currentPage;
    this.state.filter.maxResultCount = data.maxResultCount;
    this.state.filter.skipCount = data.skipCount;
    this.getDataSource();
  }

  /** 监听 */
  /** 计算属性 */
  /** 计算属性 */

  get columns(): Column[] {
    return [
      { key: 'wineBreedName', title: '酒品名称' },
      { key: 'wineBreedCode', title: '酒品代码' },

      { key: 'breedSapName', title: 'SAP物料名称' },
      { key: 'breedSapCode', title: 'SAP物料编码' },
      { key: 'type', title: '酒品类别' },
      { key: 'grade', title: '酒品等级' },

      { key: 'weight', title: '原度数量' },

      { key: 'handel', title: '操作' },
    ];
  }
  get exportUrl() {
    // if (this.state.visible) {
    //   console.log(11111111111111111);

    //   const filter = (this.$refs.inventorydetails as any)?.state?.filter;

    //   return `/alcohol-management/api/JarStatus/ExportBreedStockDetails;
    //   ?breedCode=${this.state.selectRow.breedSapCode};
    //   &manageOrganizationUnitId=${filter.manageOrganizationUnitId}&
    //   warehouseCode=${filter.warehouseCode}&
    //   skipCount=${filter.skipCount}&
    //   maxResultCount=${filter.maxResultCount}`;
    // }
    return '';
  }

  get breadData(): BreadType[] {
    return [
      { key: 'k1', title: '库存业务管理' },
      { key: 'k2', title: '酒品库存查询' },
    ];
  }
}
</script>
<style lang="scss" scoped>
.cursor {
  color: var(--primary);
  cursor: pointer;
}
</style>
